<template>
    <!--头部数量总数-->
    <div class="loading_zone_quantity">
        <div>{{ totalList.name }}</div>
        <div class="loading_zone_num">
            <div>
                <span v-for="(item, index) in numlist" :key="index">{{ item }}</span>
            </div>
            <div>{{ totalList.unit }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
/*
 * totalList头部数据总数
 * name 类型名称
 * numList 总数数字或字符串数字 例100或‘100’
 * unit  数量单位
 * */
interface Props {
    /** 循环列表 */
    totalList: any;
}
const props = withDefaults(defineProps<Props>(), {
    totalList: () => ({})
});
const numlist = ref([]);
// 总数数字处理
const digitalProcessing = () => {
    let num = props.totalList.numList;
    if (typeof props.totalList.numList === 'number') {
        num = props.totalList.numList.toString();
    }
    numlist.value = num.split('');
};
onMounted(() => {
    digitalProcessing();
});
</script>

<style scoped lang="scss">
.loading_zone_quantity {
    width: 100%;
    height: 28px;
    line-height: 28px;
    background: url(@/assets/image/airmonitoringheadback.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;

    > div {
        &:nth-of-type(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            color: #ffffff;
            letter-spacing: 3px;
            margin-left: 43px;
        }
    }

    .loading_zone_num {
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div {
            &:nth-of-type(1) {
                display: flex;
                justify-content: space-between;

                span {
                    font-family: PangMenZhengDao;
                    display: block;
                    width: 32px;
                    height: 42px;
                    line-height: 42px;
                    font-size: 20px;
                    color: #ffffff;
                    text-align: center;
                    background: url(@/assets/image/loadingZonenumback.png) no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                }
            }

            &:nth-of-type(2) {
                font-size: 12px;
                font-family: Source Han Sans CN;
                color: #ffffff;
            }
        }
    }
}
</style>
